<!DOCTYPE html>
<html>

<head>
    <title>PointOverlay</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            width: 100%;
            height: 100%;
        }

        p {
            margin-left: 5px;
            font-size: 14px;
        }

        .top {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=U3q69k0Dv0GCYNiiZeHPf7BS"></script>
    <script src="./data/geojson.js"></script>
    <script src="../dist/inmap.js"></script>

</head>

<body>
    <div id="allmap"></div>
    <div class="top">
        <button onclick="pushData()">pushData</button>
    </div>
</body>

</html>
<script>
    let colorStairs = [
        'rgba(230, 2, 14, 0.8)',
        'rgba(255, 77, 79, 0.8)',
        'rgba(255, 134, 134, 0.8)',
        'rgba(156, 156, 156, 0.8)',
        'rgba(112, 191, 255, 0.8)',
        'rgba(24, 144, 255, 0.8)',
        'rgba(0, 80, 179, 0.8)',
    ];
    var inmap = new inMap.Map({
        id: 'allmap',
        skin: "Blueness",
        center: ["114.16248337214269", "22.559515429553684"],
        zoom: {
            value: 11,
            show: true,
            max: 22
        }
    });
    var geoData = data.features.map((item) => {
        item.count = item.properties.OBJECTID_1;
        return item;
    });

    var overlay = new inMap.PolygonOverlay({
        tooltip: {
            show: true
        },
        legend: {
            show: true,
            title: "图例",
            formatter: function (val) {
                return val + "%";
            }
        },
        style: {
            normal: {
                borderWidth: 1.5,
                backgroundColor: "rgba(0,184,255,0.80)",
                label: {
                    formatter: "{name}+{name}",
                    overflow: "visible",
                    centerType: 'minMax', //cell  minMax
                    show: true, // 是否显示
                    font: "10px bold ",
                    color: "rgba(224, 238, 251,1)"
                }
            },
            mouseOver: {
                shadowColor: "rgba(0, 0, 0, 1)",
                shadowBlur: 10,
                borderWidth: 1.5,
                label: {
                    color: "rgba(0, 0, 0, 1)"
                }
            },
            selected: {
                backgroundColor: "rgba(184,0,0,1)",
                borderColor: "rgba(255,255,255,1)"
            },
            splitList: [{
                //设置区间颜色
                start: 0.5,
                backgroundColor: colorStairs[0],
            },
            {
                //设置区间颜色
                start: 0.2,
                end: 0.5,
                backgroundColor: colorStairs[1],
            },
            {
                //设置区间颜色
                start: 0,
                end: 0.2,
                backgroundColor: colorStairs[2],
            },

            {
                //设置区间颜色
                start: 0,
                end: 0,
                backgroundColor: colorStairs[3],
            },
            {
                //设置区间颜色
                start: -0.2,
                end: 0,
                backgroundColor: colorStairs[4],
            },
            {

                start: -1.5,
                end: -0.2,
                backgroundColor: colorStairs[5],
            },
            {
                end: -0.2,
                backgroundColor: colorStairs[6],
            },

            ],
        },
        data: [],
        event: {
            onState(state) {
                console.log(state);
            },
            onMouseOver() {
                console.log(arguments);
            }
        }
    });
    inmap.add(overlay);
    overlay.setData([geoData.pop()], function (a) {
        console.log(a)
    });
    window.pushData = function () {
        for (const iterator of geoData) {

            overlay.pushData([iterator], function (then) {
                console.log(then);
            });

        }
        // let lastItem = geoData.pop();
        // let lastItem2 = geoData.pop();

        // if (lastItem && lastItem2) {
        //     overlay.pushData([lastItem, lastItem2], function (then) {
        //         console.log(then);
        //     });
    }


</script>